<template>
    <div class="card card-info">
        <div class="card-header">
            <h4 class="card-title">流量趋势</h4>
        </div>
        <div class="card-body">
            <div v-if="message" id="flowData" class="card-body__box"></div>
            <div v-else class="card-body__box text-info text-center" style="line-height:500px">
                <span>暂无数据</span>
            </div>
        </div>
        <!-- /.card-body -->
    </div>
</template>

<script>
    export default {
        name: "draw-flow",

        data() {
            return {}
        },
        props: ['message'],
        computed: {},
        created(){
            if(typeof (this.message) != 'undefined'){
                this.drawLineOrder();
            }
        },
        mounted() {},
        methods: {
            drawLineOrder() {
                var myChart = echarts.init(document.getElementById('flowData'));
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [{
                            name: '访客量',
                            icon: 'roundRect',
                            textStyle: {color: '#5D9CEC'}
                        }, {
                            name: '下单量',
                            icon: 'roundRect',
                            textStyle: {color: '#62C77F'}
                        }, {
                            name: '转化率',
                            icon: 'roundRect',
                            textStyle: {color: '#F15755'}
                        }]
                    },
                    xAxis: [
                        {
                            type: 'category',
                            // data: ['5月1日', '5月2日', '5月3日', '5月4日', '5月5日', '5月6日', '5月7日']
                            data: this.message.date
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitArea: {show: true}
                        }
                    ],
                    series: [
                        {
                            name: '访客量',
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: '#5D9CEC',
                                    lineStyle: {
                                        color: '#5D9CEC'
                                    }
                                }
                            },
                            // data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                            data: this.message.visitor_volume
                        },
                        {
                            name: '下单量',
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: '#62C77F',
                                    lineStyle: {
                                        color: '#62C77F'
                                    }
                                }
                            },
                            // data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                            data: this.message.order_number
                        },
                        {
                            name: '转化率',
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: '#F15755',
                                    lineStyle: {
                                        color: '#F15755'
                                    }
                                }
                            },
                            // data: [1.0, 0.9, 3.0, 3.9, 25, 57, 35, 62.2, 12.6, 27.0, 26, 3.3]
                            data: this.message.order_rate
                        }
                    ]
                })
            }
        }

    }
</script>

<style scoped>
    .card-body__box {
        width: 1200px;
        height: 500px;
    }
</style>